<template>
  <div>
    <div class="layout" >
      <el-card class="box-card">
        <el-container style="border-radius: 5px;">
          <el-header>
            <h2>用户注册</h2>
          </el-header>
          <el-main style="margin-top: 25px;">
            <div>
              <el-form label-position="right" label-width="0px" style="max-width: 400px" class="loginForm">
  
                <el-form-item>
                  <el-input placeholder="账号" prefix-icon="User" v-model="username" />
                </el-form-item>
  
                <el-form-item>
                  <el-input placeholder="密码"  prefix-icon="Lock" show-password type="password" v-model="pwd" />
                </el-form-item>
  
                <el-form-item >
                  <el-input placeholder="重复密码" prefix-icon="Lock" show-password type="password" v-model="rPwd" />
                </el-form-item>

                <el-form-item >
                  <el-input placeholder="手机号" prefix-icon="ChatLineRound" v-model="phone" />
                </el-form-item>
  
                <el-row>
                  <el-checkbox style="margin-bottom: 10px;" class="checkBox" v-model="isAgree" label="同意用户使用准则" name="type"/>
                </el-row>
  
                <el-row>
                  <el-button type="primary" :disabled="!isAgree" class="btn-grad" @click="reg">注 册</el-button>
                </el-row>
  
                <el-row>
                  <a class="toLog" href="#/">登录账号</a>
                </el-row>
  
              </el-form>
            </div>
          </el-main>
        </el-container>
      </el-card>
    </div>
  </div>
  </template>
  
  <script>
  import Qs from 'qs'
  import { ElMessage } from 'element-plus'
  export default {
    created:function(){
    },
    data:function(){
      return{
        username:'',
        pwd:'',
        rPwd:'',
        name:'',
        phone:'',
        isAgree:false
      }
    },
    methods:{
      reg(){
        if(this.pwd===this.rPwd){
          let data={
            username:this.username,
            pwd:this.pwd,
            name:this.name,
            phone:this.phone
          }
          data=Qs.stringify(data);
          this.$http.post("/user/register",data)
              .then((response)=>{
                if(response.data===0){
                  ElMessage({
                    message: '注册成功！',
                    type: 'success',
                  });
                }
                else {
                  ElMessage.error("注册失败，账户名重复！");
                }
              });
        }
        else {
          alert("两次输入密码不一致！");
        }
      }
    }
  }
  </script>
  <style scoped>
  .layout {
    position: absolute;
    left: calc(50% - 200px);
    top: 10%;
    width: 400px;
  }
  .loginForm {
    text-align: center;
  }
  .checkBox {
    margin-left: 7px;
  }
  .btn-grad {
    background-image: linear-gradient(to right, #1CD8D2 0%, #93EDC7  51%, #1CD8D2  100%);
    padding: 15px 45px;
    height: 40px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 10px gray;
    border-radius: 13px;
    display: block;
    border: none;
    width: 400px;
  }

  .btn-grad:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
  }
  
  .toLog{
    float:right;
    margin-top: 10px;
    color:var(--el-color-primary);
    text-decoration: none;
  }

  .toLog:hover{
    color:var(--el-color-primary-light-3);
  }
  
  </style>